<template>
	<view :class="themeName">
		<view class="p-30 flex row-center">
			<image class="tops" src="/others/static/logo.png" mode=""></image>
			<view class="operate m-l-35">
				<view style="color: chocolate;">Wi-Fi</view>
				<u-count-down ref="uCountDown" :timestamp="beginTime" :autoplay="false" @end="finish" :show-days="false" :font-size="40" />
			</view>
		</view>
		<view class="boxes">
			<view class="flex row-between m-t-40">
				<view @click="gosend('cmd{01}')">启动</view>
				<view @click="gosend('cmd{02}')">暂停</view>
			</view>
			<view class="flex row-between m-t-40">
				<view @click="gosend('cmd{05}')">减轻</view>
				<view @click="gosend('cmd{06}')">加重</view>
			</view>
			<view class="flex row-between m-t-40">
				<view @click="gosend('cmd{03}')">前进</view>
				<view @click="gosend('cmd{04}')">后退</view>
			</view>
			<view class="flex row-between m-t-40">
				<view @click="gosend('cmd{07}')">开频</view>
				<view @click="gosend('cmd{08}')">关频</view>
			</view>
			<view class="flex row-between m-t-40">
				<view @click="gosend('cmd{09}')">播放</view>
				<view @click="gosend('cmd{10}')">关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
import { jqrCmd, orderInfo } from '@/api/others.js';
export default {
	data() {
		return {
			id: '',
			type: '', //1支付后启动服务    2 启动后的订单重新启动服务   3店长直控
			time: 0,
			beginTime: 0, //开始倒计时
			status: 1 //1首次启动，倒计时开始   2 重新操作不做任何控制
		};
	},
	onLoad(options) {
		let that = this;
		that.id = options.id;
		that.type = options.type;
		if (options.type == 1) {
			//支付后启动订单服务
			that.time = Number(options.time) * 60;
		} else if (options.type == 2) {
			//启动后的订单继续操控
			orderInfo({ id: options.id }).then((res) => {
				that.time = res.time;
				if (that.status == 1) {
					//首次启动
					that.beginTime = res.time;
					that.$refs.uCountDown.start(); //倒计时开始显示
					that.status = 2;
				}
			});
		} else if (options.type == 3) {
			//店长直控
			that.time = Number(options.time) * 60;
			// that.$nextTick(() => {
			// 	that.getinit();
			// });
		}
	},
	methods: {
		// 倒计时结束
		finish() {
			let that = this;
			console.log('服务已结束');
			that.gosend('cmd{10}')
			uni.showModal({
				content: '服务已结束',
				showCancel: false,
				confirmText: '确认',
				success: function (res) {
					if (res.confirm) {
						that.$Router.replaceAll({
							path: '/pages/user/user'
						});
					}
				}
			});
		},
		// 点击按钮操作
		gosend(cmd) {
			var that = this;
			if (that.status == 1 && cmd != 'cmd{01}') {
				uni.showModal({
					content: '设备未启动',
					showCancel: false,
					confirmText: '确认',
					success: function (res) {
						if (res.confirm) {
						}
					}
				});
				return;
			}
			jqrCmd({
				id: that.id,
				cmd: cmd
			})
				.then((res) => {
					if (that.status == 1) {
						//首次启动
						that.beginTime = that.time;
						that.$refs.uCountDown.start(); //倒计时开始显示
						that.status = 2;
					}
				})
				.catch((err) => {
					console.log(err)
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.tops {
	width: 300rpx;
	height: 120rpx;
}
.operate {
	text-align: center;
}
.boxes {
	border-radius: 30rpx;
	color: #000;
	font-size: 28rpx;
	padding: 30rpx;
	padding-top: 0;
	.m-t-40 {
		view {
			font-weight: bold;
			font-size: 75rpx;
			text-align: center;
			padding: 30rpx 85rpx;
			border: 1px solid #999;
			border-radius: 20rpx;
		}
	}
}
.base {
	color: #003fde;
	font-size: 50rpx;
	text-align: center;
	font-weight: bold;
	margin: 30rpx;
	padding: 0rpx 30rpx;
	border: 1px solid #999;
	border-radius: 20rpx;
}
</style>
